<template>
  <div class="addMsg" v-if="props.showDialog">
    <Dialog
      diaTop="6"
      :headerName="props.addOrEdit ? '新增' : '编辑'"
      :showDialog="true"
      @close="close"
      @save="save"
      :saveLetter="props.addOrEdit ? '提交' : '保存'"
      diaWidth="31"
      footerTop="10"
    >
      <template #content>
        <div class="content-wrap">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="210px"
          >
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="处置单位：" prop="disposeenterpriseid">
                  <el-select
                    v-model="formData.disposeenterpriseid"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in disposeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="涉废类型：" prop="wastetype">
                  <el-select
                    v-model="formData.wastetype"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in wasteList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="处置量：" prop="wastenum">
                  <el-input clearable v-model="formData.wastenum" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="处置联单编号：" prop="orderno">
                  <el-input clearable v-model="formData.orderno" />
                  <!-- <el-select
                    v-model="formData.orderno"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="处置时间：" prop="commitdate">
                  <el-date-picker
                    v-model="formData.commitdate"
                    type="date"
                    clearable
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item
                  label="处置联单图片："
                  label-width="210"
                  prop="disposeimgurl"
                >
                  <Upload
                    :ref="
                      (e) => {
                        formData.disposeimgurl = e.imgUrl;
                      }
                    "
                  >
                    <template #content>
                      <div class="qr-code">
                        <div class="content">
                          <img
                            @click.stop="searchImg(formData.disposeimgurl)"
                            v-if="formData.disposeimgurl"
                            :src="formData.disposeimgurl"
                            alt=""
                          />
                          <button>
                            {{
                              formData.disposeimgurl ? "重新上传" : "点击上传"
                            }}
                          </button>
                        </div>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="车辆信息：" prop="transtruck">
                  <el-input clearable v-model="formData.transtruck" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="驾驶员信息：" prop="transdriver">
                  <el-input clearable v-model="formData.transdriver" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import Upload from "@/components/Upload";
import ElMessage from '@msg'
import dayjs from 'dayjs'
import http from "@http";
let props = defineProps([
  "showDialog",
  "addOrEdit",
  "stockenterpriseid",
  "rowDetail",
]);
let emit = defineEmits(["update:showDialog", "save", "update:addOrEdit"]);
let add = ref(true);
let wasteList = ref([]);
let showImg = ref(false);
let disposeList = ref([]);
let srcList = ref([]);
let formData = reactive({commitdate:''});

let formRef = ref(null);
let searchImg = (url) => {
  showImg.value = true;
  srcList.value = [url];
};
watch(
  () => props,
  (newVal) => {
    console.log(newVal, "ee");
    nextTick(() => {
      setTimeout(() => {
        formRef.value.resetFields();
        for (let key in formData) {
          delete formData[key];
          formData.commitdate = dayjs().format('YYYY-MM-DD')
        }
        if (newVal.rowDetail.id) {
          for (let key in newVal.rowDetail) {
            formData[key] = newVal.rowDetail[key];
          }
          formData.wastetype = String(newVal.rowDetail.wastetype);
        }
        
      }, 0);
    });
  },
  { deep: true }
);
let close = () => {
  console.log("-=-=");
  emit("update:showDialog", false);
};
let save = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      http({
        url: "/wasteDispose/addOrUpdate",
        data: { ...formData, stockenterpriseid: props.stockenterpriseid },
      }).then((res) => {
        if (res.code == 0) {
          emit("save");
          ElMessage({msg:'修改成功'})
        }
      });
    }
  });
};
let rules = {
  disposeenterpriseid: [
    {
      required: true,
      message: "处置单位不能为空",
      trigger: "blur",
    },
  ],
  wastetype: [
    {
      required: true,
      message: "涉废类型不能为空",
      trigger: "blur",
    },
  ],
  wastenum: [
    {
      required: true,
      message: "处置量不能为空",
      trigger: "blur",
    },
  ],
  orderno: [
    {
      required: true,
      message: "处置联单编号不能为空",
      trigger: "blur",
    },
  ],
  commitdate: [
    {
      required: true,
      message: "处置时间不能为空",
      trigger: "blur",
    },
  ],
  disposeimgurl: [
    {
      required: true,
      message: "处置联单图片不能为空",
      trigger: "blur",
    },
  ],
  transtruck: [
    {
      required: true,
      message: "车辆信息不能为空",
      trigger: "blur",
    },
  ],
  transdriver: [
    {
      required: true,
      message: "驾驶员信息不能为空",
      trigger: "blur",
    },
  ],
};
http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
  if (res.code == 0) {
    wasteList.value = res.data.map((item) => {
      return { value: item.id, label: item.name };
    });
  }
});
http({ url: "/admPCEnterpriseThird/listThirdEnterprises" }).then((res) => {
  if (res.code == 0) {
    disposeList.value = res.data.map((item) => {
      return { value: item.id, label: item.enterprisename };
    });
  }
});
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.addMsg {
  .content-wrap {
    padding-right: 20px;
    width: 100%;
    .qr-code {
      width: 100%;
      height: 103px;
      background: #f7f7f7;
      border-radius: 5px;
      border: 1px dashed #bfbfbf;
      display: flex;
      align-items: center;
      justify-content: center;
      .content {
        min-width: 200px;
        width: 100%;
        height: 103px;
        padding-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 220px;
          height: 85px;
        }
        button {
          margin-top: 5px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
  :deep(.el-input) {
    width: 100% !important;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #333;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.avatar-uploader){
    width: 100%;
  }
  :deep(.upload){
    width: 100% !important;
  }
}
</style>
